<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>录入费用</title>
    <link rel="stylesheet" href="../../lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui/lay/dest/layui.all.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/layui/layui/layui.js"></script>
    <style>
        * {font-family: "Microsoft Yahei" !important;}
        nav button{
            margin-left: 5px;
            padding: .25rem .5rem;
            font-size: .875rem;
            border-radius: .2rem;
            float: right !important;
            margin-top: 10px
        }
        nav div{
            float: left !important;
            margin: 15px;
        }
        nav{
            height: 50px;
            border-bottom: 1px solid #cfdbe2;
            background-color: #fafbfc;
            border-radius: 0;
        }
        .layui-tab{
            margin:0;
        }
        .content{
            height: 544px;
            overflow: auto;
            margin: 14px;
            padding: 14px;
            background: #fff;
        }
        .layui-tab-content{
            background-color: #F5F7FA;
        }
    </style>
</head>
<body>
<form class="layui-form" action="" id="ajaxforms">
    <nav>
        <div>录入费用</div>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="javascript:window.location.href='/charge/mine'" style="margin-right: 30px">返回</button>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm addBtn">提交</button>
        <%--<button type="button" class="layui-btn layui-btn-normal layui-btn-sm">保存并添加下一个</button>--%>
    </nav>
    <div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <div class="layui-tab-content">
                <div class="content">
                    <div class="layui-form-item">
                        <label class="layui-form-label">报销人<span style="color:red">*</span></label>
                        <div class="layui-input-block" style="display: -webkit-box;">
                            <input style="width: 12%;" type="text" id="apply" name="" lay-verify="title" autocomplete="off" placeholder="请选择报销人" class="layui-input">
                            <a href="javascript:;" id="exchangeUserId"  style="color: blue;margin-left: 6px;">添加</a>
                            <a href="javascript:;" id="clearSenduser"  style="color: red;margin-top: 25px;margin-left: 10px">清空</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">报销事由</label>
                        <div class="layui-input-block">
                            <textarea id="reasons" style="display: none;"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">报销日期</label>
                            <div class="layui-input-block" style="width: 190px">
                                <input type="tel" name="paymentDate" id="time" lay-verify="required|phone" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">报销金额</label>
                            <div class="layui-input-block" style="width: 190px">
                                <input type="text" name="chargeCost" lay-verify="email" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">[个人预警数值] : 未设置</div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">报销科目</label>
                        <div class="layui-input-inline">
                            <select name="chargeTypeParentid" lay-filter="chargeTypeParentid">
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="chargeTypeId">

                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">费用承担者</label>
                        <div class="layui-input-block">
                            <input type="radio" lay-filter="cost" name="chargeUndertaker" value="1" title="个人" checked="">
                            <input type="radio" lay-filter="cost" name="chargeUndertaker" value="2" title="部门">
                            <input type="radio" lay-filter="cost" name="chargeUndertaker" value="3" title="公司">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
<script>
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return decodeURI(r[2]); return null;
    }
    var id=getUrlParam('chargeListId')
    $('.content').height($(window).height() - 130);
    $('.classBtn').click(function () {
        $(this).toggleClass("one")
        $(this).siblings('button').removeClass("one");
    });
    $("#exchangeUserId").click(function(){//选人员控件
        user_id='apply';
        $.popWindow("../../common/selectUser?0");
    });
    $('#clearSenduser').click(function(){
        $('#apply').get(0).setAttribute('user_id', '');
        $('#apply').val('');
    });
    $(function () {
        $.ajax({
            url: "/chargeType/selectChargeType",
            type:'get',
            dataType:"JSON",
            success:function(data){
                var str='<option value="">请选择</option>';
                for (var i=0;i<data.obj.length;i++){
                    str += '<option name="chargeTypeParentid" value="'+data.obj[i].chargeTypeId+'">'+data.obj[i].chargeTypeName+'</option>'
                }
                $('[name="chargeTypeParentid"]').html(str);
            }
        })
    });
    layui.use(['form', 'layedit', 'laydate','layedit','table'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,layedit = layui.layedit
            ,table = layui.table;

        var index=layedit.build('reasons'); //建立编辑器
        form.render();
        //日期
        laydate.render({
            elem: '#time'
        });
        form.on('select(chargeTypeParentid)', function (data) {
            chargeType(data.value)
        });
        if(getUrlParam('chargeListId')!=null){
            $('nav div').text('编辑费用')
            $.ajax({
                url: "/chargeList/findChargeListById",
                type:'get',
                dataType:"JSON",
                data: {
                    chargeListId:getUrlParam('chargeListId')
                },
                success:function(data){
                    $('[name="paymentDate"]').val(data.object.paymentDate);
                    $('[name="chargeTypeParentid"]').find("option[value="+data.object.chargeTypeParentid+"]").prop("selected",true);
                    $('[name="chargeCost"]').val(data.object.chargeCost);
                    $(':radio[name="chargeUndertaker"][value="'+data.object.chargeUndertaker+'"]').prop('checked',true);
                    form.render();
                    $('#apply').val(data.object.userName);
                    $('#apply').attr('user_id',data.object.userId);
                    $('#apply').attr('userprivname',data.object.userName);
                    var chargeTypeId= data.object.chargeTypeId
                    chargeType(data.object.chargeTypeParentid,chargeTypeId)
                    layedit.setContent(index, data.object.reason);
                    form.render();
                }
            })
        }else{
            $('nav div').text('录入费用')
        }
        function chargeType(id,chargeTypeId) {
            $.ajax({
                url: "/chargeType/findChargeTypeByParent",
                type:'get',
                dataType:"JSON",
                data:{
                    chargeTypeParent: id
                },
                success:function(data){
                    var str='<option value="">请选择</option>';
                    for (var i=0;i<data.object.childList.length;i++){
                        str += '<option value="'+data.object.childList[i].chargeTypeId+'">'+data.object.childList[i].chargeTypeName+'</option>'
                    }
                    $('[name="chargeTypeId"]').html(str);
                    $('[name="chargeTypeId"]').find("option[value="+chargeTypeId+"]").prop("selected",true);
                    form.render();
                }
            })
        }
        form.on('radio(cost)', function (data) {
            if(data.value=='1'){
                $('.layui-word-aux').text('[个人预警数值] : 未设置')
            }else if(data.value=='2'){
                $('.layui-word-aux').text('[部门预警数值] : 未设置')
            }else{
                $('.layui-word-aux').text('[公司预警数值] : 0.00 (季度)')
            }
        });
        $('.addBtn').click(function () {
            add();
        });
        function add() {
            var chargeCost=$('[name="chargeCost"]').val()
            if (chargeCost.split('.')[1] == undefined || chargeCost.split('.')[1] == '') {
                chargeCost = chargeCost + '.00'
            } else {
                chargeCost = chargeCost
            }
            if($('[name="chargeTypeId"]').val()==''&&$('[name="chargeTypeParentid"]').val()!=''){
                layer.msg('请选择报销科目的二级科目！',{icon:2});
                return false;
            }else{
                if(id!=null){
                    $.ajax({
                        url: '/chargeList/editChargeList',
                        type: 'post',
                        dataType: 'json',
                        data: JSON.stringify({
                            chargeListId:id,
                            paymentDate:$('[name="paymentDate"]').val(),
                            chargeTypeParentid:$('[name="chargeTypeParentid"]').val(),
                            chargeUndertaker:$('[name="chargeUndertaker"]:checked').val(),
                            chargeTypeId:$('[name="chargeTypeId"]').val(),
                            chargeCost:chargeCost,
                            userId:$('#apply').attr('user_id').split(',')[0],
                            reason:layedit.getText(index),
                            userName:$('#apply').attr('userprivname').split(',')[0],
                        }),
                        contentType: 'application/json',
                        success: function (data) {
                            window.location.href='/charge/mine'
                            layer.msg('保存成功！',{icon:1});/*添加成功*/
                        },
                        error: function (data) {
                            layer.msg('保存失败！',{icon:2});/*添加失败*/
                        }
                    })
                }else{
                    $.ajax({
                        url: '/chargeList/saveChargeList',
                        type: 'post',
                        dataType: 'json',
                        data: JSON.stringify({
                            paymentDate:$('[name="paymentDate"]').val(),
                            chargeTypeParentid:$('[name="chargeTypeParentid"]').val(),
                            chargeUndertaker:$('[name="chargeUndertaker"]:checked').val(),
                            chargeTypeId:$('[name="chargeTypeId"]').val(),
                            chargeCost:chargeCost,
                            userId:$('#apply').attr('user_id').split(',')[0],
                            reason:layedit.getText(index),
                            userName:$('#apply').attr('userprivname').split(',')[0],
                        }),
                        contentType: 'application/json',
                        success: function (data) {
                            window.location.href='/charge/mine'
                            layer.msg('保存成功！',{icon:1});/*添加成功*/
                        },
                        error: function (data) {
                            layer.msg('保存失败！',{icon:2});/*添加失败*/
                        }
                    })
                }
            }


        }


    });

</script>

</html>
